<template>
  <div class="header-aside">
    <el-menu @select="handleSelect" text-color="#07a1b2" background-color="#002b36" :collapse="true">
      <el-menu-item index="1">1</el-menu-item>
      <el-menu-item index="2">2</el-menu-item>
      <el-menu-item index="3">3</el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox, Action } from 'element-plus';

const handleSelect = (key: string, keyPath: string[]) => {
  switch (key) {
    case 'about':
      // 关于
      break;
    default:
      break;
  }
}



</script>

<style lang="scss" scoped>
.header-aside {
  width: 63px;
  overflow-x: hidden;

  .el-menu-item.is-active {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 2px;
      height: 100%;
      background-color: #19f9b8;
    }
  }
}
</style>